<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="qa">
    <div v-if="tableData.taskQalist.length == 0" class="kongimg">
      <img src="../../../../static/images/kongkong.png">
    </div>
    <div slot="scrollList" class="scrollList">
      <div class="qaList">
        <div v-for="item in tableData.taskQalist" :key="item.id" class="itemCard" style="padding-bottom:15px">
          <h1>提问人： {{ item.createUser }} &nbsp; &nbsp; &nbsp;提问门店：{{ item.clubId }}</h1>
          <!-- 门店提问 -->
          <div class="storeQa">
            <div class="storeQaCentent">
              <div class="img"><img src="../../../../static/images/storeqa.png" alt=""></div>
              <p v-html="item.qaContent">{{ item.qaContent }} </p>
            </div>
            <ul v-if="item.qaPic != undefined && item.qaPic.length>0" class="storeQaImg flex-sc">
              <li v-for="(items,index) in item.qaPic" :key="index" @click="previewiImg(items)">
                <img :src="items" alt="">
              </li>
            </ul>
          </div>
          <p style="margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #ccc;color:#5D5D5D">{{ item.createTime }} 提问</p>
          <!-- 总部回答 -->
          <div class="systemqa">
            <div class="storeQaCentent">
              <div class="img">
                <img src="../../../../static/images/storeqa1.png" alt="">
              </div>
              <div v-if="item.replayContent">回复人： {{ item.replayUser }} </div>
            </div>

            <div style="margin-bottom:20px;line-height:25px;">{{ item.replayContent | changetime }}</div>
          </div>
          <p v-if="item.replayContent" style="color:#5D5D5D">{{ item.replayTime }} 回复</p>
        </div>
      </div>
    </div>
    <div class="qaAdd" @click="onOpenPhoto()"><img src="../../../../static/images/qa.png" alt=""></div>
    <template>
      <input id="imgFile" ref="imgFile" type="file" accept="images/*" style="display:none" @change="imgchange($event)">
    </template>
    <WPTX_PREVIEWIMG ref="wptxPreviewImg" />
    <!-- Photo upload-->
    <wptx_wx_uploadImg
      ref="uploadImgModular"
      :upload-img-show="uploadImgShow"
      :config="config"
      :img-list="imgList"
      :parameter="parameter"
      @imgUploadClose="imgUploadClose"
      @deleteImg="deleteImg"
      @unloadImg="unloadImg"
      @submitUnloadImg="submitUnloadImg"
    />
  </div>
</template>
<script>
import { global } from '../../filter/global-api'
import Vue from 'vue'
import VueResource from 'vue-resource'
import $ from 'jquery'
import _common from '../../framework/commonJs/wptx_common'
import _tools from '../../framework/commonJs/wptx_tools'
import _validate from '../../framework/commonJs/wptx_validate'
import _taskqaAPI from '../../framework/API/taskqaapi'
import _storewxtaskAPI from '../../framework/API/storewxtaskapi'
import WPTX_SCROLL from '../../framework/commonTemplate/vue-scroll'
import WPTX_PREVIEWIMG from '../../framework/commonTemplate/wptx_previewImg'
import wptx_wx_uploadImg from '../../../components/framework/commonTemplate/wptx_wx_uploadImg'
const _FUNCTION_NAME = _common.pageName.WPTXQALIST
export default {
  components: {
    WPTX_SCROLL: WPTX_SCROLL,
    WPTX_PREVIEWIMG: WPTX_PREVIEWIMG,
    // Photo upload
    wptx_wx_uploadImg: wptx_wx_uploadImg
  },
  filters: {
    changetime(val) {
      if (_validate.checkKong(val)) {
        return ' 暂无回答 '
      } else {
        return val
      }
    }
  },
  data() {
    return {
      tableData: {
        photoFeedDTOList: [],
        qacentent: '',
        taskQalist: [],
        taskInfo: {
          taskStatus: 0, // 任务状态（注：-2：已取消 -1：已撤回 0：待跟进；1：跟进中；2：已完成；3：已超时；,
          doCompleteTaskRight: false // doCompleteTaskRight (boolean, optional): 是否有完成任务权限 ,
        }
      },
      scrollState: true, // 是否可以滑动
      indexScrollTop: 0,
      page: {
        counter: 2
      },
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      fullscreenLoading: false,
      customData: {
        taskId: 0,
        qaAddShow: false
      },
      show: false,
      imgUrl: '',
      uploadImgShow: false,
      config: {
        title: '', // 页面的标题
        Immediately: false, // 是否立即调用拍照
        desc: '', // 描述
        descShow: true, // 描述是否显示
        type: true// 是操作还是预
      },
      imgList: [],
      parameter: {}
    }
  },
  mounted() {
    const self = this
    self.onInit()
  },
  methods: {
    onInit() {
      const self = this
      self.page.counter = 1
      const data = {
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId,
        taskId: JSON.parse(sessionStorage.getItem('taskId'))
      }
      _storewxtaskAPI.qaList(self, data, self.callBack_Init)
    },
    callBack_Init(data) {
      const self = this
      if (_validate.checkListEmpty(data)) {
        return false
      }
      data.map(item => {
        if (!_validate.checkListEmpty(item.qaContent)) {
          item.qaContent = item.qaContent.replace(/&amp;/g, '&')
          item.qaContent = item.qaContent.replace(/&lt;/g, '<')
          item.qaContent = item.qaContent.replace(/&gt;/g, '>')
          item.qaContent = item.qaContent.replace(/&nbsp;/g, ' ')
          item.qaContent = item.qaContent.replace(/&#39;/g, "\'")
          item.qaContent = item.qaContent.replace(/&quot;/g, '"')
          item.qaContent = item.qaContent.replace(/&middot;/g, '·')
          item.qaContent = item.qaContent.replace(/&hellip;/g, '…')
          item.qaContent = item.qaContent.replace(/&mdash;/g, '—')
          item.qaContent = item.qaContent.replace(/&ldquo;/g, '“')
          item.qaContent = item.qaContent.replace(/&rdquo;/g, '”')
          item.qaContent = item.qaContent.replace(/&lsquo;/g, '‘')
          item.qaContent = item.qaContent.replace(/&rsquo;/g, '’')
        }
        if (!_validate.checkListEmpty(item.replayContent)) {
          item.replayContent = item.replayContent.replace(/&amp;/g, '&')
          item.replayContent = item.replayContent.replace(/&lt;/g, '<')
          item.replayContent = item.replayContent.replace(/&gt;/g, '>')
          item.replayContent = item.replayContent.replace(/&nbsp;/g, ' ')
          item.replayContent = item.replayContent.replace(/&#39;/g, "\'")
          item.replayContent = item.replayContent.replace(/&quot;/g, '"')
          item.replayContent = item.replayContent.replace(/&middot;/g, '·')
          item.replayContent = item.replayContent.replace(/&hellip;/g, '…')
          item.replayContent = item.replayContent.replace(/&mdash;/g, '—')
          item.replayContent = item.replayContent.replace(/&ldquo;/g, '“')
          item.replayContent = item.replayContent.replace(/&rdquo;/g, '”')
          item.replayContent = item.replayContent.replace(/&lsquo;/g, '‘')
          item.replayContent = item.replayContent.replace(/&rsquo;/g, '’')
        }
      })
      self.tableData.taskQalist = data
    },
    callBack_Refresh(data) {
      const self = this
      if (data.code == 0) {
        const now = new Date()
        self.tableData.taskQalist = data.data.result
        self.page.counter++
        self.$refs.myScroll.setState(3)
      } else {
        self.$refs.myScroll.setState(3)
        global.errorToLogin(self, data)
      }
    },
    callBack_Pull(data) {
      const self = this
      if (data.code == 0) {
        if (data.data.result.length > 0) {
          self.page.counter++
          const now = new Date()
          data.data.result.map(item => {
            self.tableData.taskQalist.push(item)
            return item
          })
          self.$refs.myScroll.setState(5)
        } else {
          self.$refs.myScroll.setState(7)
        }
      } else {
        self.$refs.myScroll.setState(5)
        global.errorToLogin(self, data)
      }
    },
    callBack_formItemData(data) {
      const self = this
      self.fullscreenLoading = false
      if (_validate.checkListEmpty(data)) {
        return
      }
      if (_validate.checkListEmpty(self.tableData.photoFeedDTOList)) {
        self.tableData.photoFeedDTOList = []
      }
      const currImageList = self.tableData.photoFeedDTOList
      const currImage = data
      if (_validate.checkEmpty(currImage)) {
        return
      }
      const currImagePath = currImage.filePath
      const fileName = currImage.fileName
      const chkRet = self.checkImageExist(currImageList, currImagePath)
      if (chkRet) {
        return
      } else {
        const imageInfo = {
          feedbackPath: currImagePath,
          fileName: fileName
        }
        currImageList.push(imageInfo)
      }
    },
    callBack_taskplaybookfeedbackapi(data) {
      const self = this
      self.customData.qaAddShow = false
      self.onInit()
    },
    checkImageExist(imageList, imagePath) {
      if (_validate.checkEmpty(imagePath)) {
        return false
      }
      let currImage = {}
      let cnrrImagePath = ''
      for (let cnt = 0; cnt < imageList.length; cnt++) {
        currImage = imageList[cnt]
        if (_validate.checkEmpty(currImage)) {
          continue
        }
        cnrrImagePath = currImage.feedbackPath
        if (_validate.checkEmpty(cnrrImagePath)) {
          continue
        }
        if (cnrrImagePath == imagePath) {
          return true
        }
      }
      return false
    },
    previewiImg(data) {
      const self = this
      self.$refs.wptxPreviewImg.previewImage(data)
    },
    imgClose(val) {
      const self = this
      self.show = val.imgShow
      self.imgUrl = ''
    },

    imgUploadClose() {
      const self = this
      self.uploadImgShow = false
      self.onInit()
    },
    deleteImg(parameter, data) {
      const self = this
      const res = {
        executionId: parseInt(sessionStorage.getItem('executionId')),
        taskPlaybookFeedbackRecordId: data.id,
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId,
        storeItemId: parameter.id,
        taskId: parseInt(sessionStorage.getItem('taskId')),
        taskPlaybookFeedbackId: parameter.taskPlaybookFeedbackId,
        upcNbr: parameter.upcNbr
      }
      _taskplaybookfeedbackrecordapi.delete(self, res, self.callBack_delete)
    },
    callBack_delete(data) {
      const self = this
      self.$refs.uploadImgModular.deleteImgReceive(data)
    },
    // 上传图片
    unloadImg(parameter, serverId) {
      const self = this
      const params = {
        itemId: parameter.id,
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId,
        taskId: sessionStorage.getItem('taskId'),
        mediaId: serverId
      }
      _storewxtaskAPI.downloadqa(self, params, self.callBack_unloadImg)
    },
    callBack_unloadImg(data) {
      const self = this
      self.$refs.uploadImgModular.unloadImgReceive(data)
    },
    submitUnloadImg(parameter, imgList, desc) {
      const self = this
      const data = {
        storeId: JSON.parse(sessionStorage.getItem('context')).loginName,
        fileList: [],
        qaContent: desc,
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId,
        taskId: parseInt(sessionStorage.getItem('taskId'))
      }
      imgList.map(item => {
        const imgObject = {}
        imgObject.fileName = item.fileName,
        imgObject.fileUrl = item.url,
        imgObject.relativePath = item.imgUrl
        data.fileList.push(imgObject)
      })
      _storewxtaskAPI.qaCreateV2(
        self,
        data,
        self.callBack_submitUnloadImg
      )
    },
    callBack_submitUnloadImg(data) {
      const self = this
      self.$refs.uploadImgModular.submitUnloadImgReceive(data)
    },

    // 调用企业微信拍照
    onOpenPhoto() {
      const self = this
      const feedbackImgList = []
      self.uploadImgShow = true
      self.config.title = ''// 页面的标题
      self.config.qaContent = self.tableData.qacentent// 描述
      self.config.Immediately = false// 是否立即调用拍照
      self.config.descShow = true// 描述是否显示
      self.config.type = true// 是操作还是预
      self.imgList = feedbackImgList
      self.parameter = self.tableData
    },
    onRefresh() {
      const self = this
      self.page.counter = 1
      const data = {
        page: {
          pageNo: 1,
          pageSize: 10
        },
        taskId: sessionStorage.getItem('taskId')
      }
      data.page.pageNo = 1
      data.page.pageSize = self.pageData.pageSize
      _taskqaAPI.taskqaList(self, data, self.callBack_Refresh)
    },
    onPull() {
      const self = this
      const data = {
        page: {
          pageNo: self.page.counter,
          pageSize: 10
        },
        taskId: sessionStorage.getItem('taskId')
      }
      data.page.pageNo = self.page.counter
      data.page.pageSize = self.pageData.pageSize
      _taskqaAPI.taskqaList(self, data, self.callBack_Pull)
    },
    // 滚动条位置
    getTop(y) {
      const self = this
      self.indexScrollTop = y
    }
  }
}
</script>
<style scoped>
.qa{
  width:100%;
  height:100%;
  overflow-x: hidden;
}
.kong {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kongimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kongimg img {
  width: 187px;
  height: 191px;
}
.scrollList{
  padding:15px;
  box-sizing: border-box;
}
.qaAdd{
  position: fixed;
  width: 58px;
  height: 58px;
  bottom: 100px;
  right: 20px;
  z-index: 999;
  border-radius: 100%;
}
.qaAdd img{
  width:100%;
  height:100%;
}
.qaTemplate{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 999;
  padding:15px;
  box-sizing: border-box;
  background-color:#fff;
}
.qa .prohibit{
  padding:15px;
  box-sizing: border-box;
}
.qaList .itemCard h1{
  font-size: 15px;
  margin-bottom: 20px;
  color:#212121
}
.qaTemplate .el-textarea{
  margin-bottom: 15px
}
.qaTemplate textarea{margin-bottom:15px}
.imgList>div{
  width:100px;
  height:100px;
  margin-right:10px;
  position: relative;
  border:1px solid #e1e1e1;
}
.imgList>div:last-child{
  border:none;
}
.imgList>div>div{
  position: absolute;
  width:20px;
  height:20px;
  right:10px;
  top:10px;
}
.imgList>div>div img{
  width:100%
}
.imgList{
  margin-bottom: 20px
}
.imgList>div img{
  width:100%;
  height:100%
}
.photo_btn{
  text-align: center
}
.storeQaImg{
  flex-wrap: wrap;
  padding-left:30px;
  margin-bottom: 10px;
}
.storeQaImg li{
  display: flex;
  justify-content: center;
  align-items: center;
  flex:none;
  width:90px;
  height:90px;
  margin-right: 10px;
  margin-bottom: 10px;

  border:1px solid #eee;
  box-sizing: border-box;
}
.storeQaImg li img{
  max-width:100%;
  max-height:100%;
}
.storeQaCentent{
  display: flex;
justify-items: center;
align-content: center;
margin-bottom: 10px;
}
.storeQaCentent .img{
  width:30px;
  flex:none;
}
.storeQa .storeQaCentent>p{
  flex:1;
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
}
.storeQaCentent .img img{
  width:20px;
}
.systemqa p{
  font-size: 13px;
  line-height: 25px;
}
.storeQaImg{font-size: 0;}
</style>
